<template>
  <div class="home">
     <router-view/>
     <div class="bottom-bar clear-fix">
        <div :class="chipsActive" @click="examineChips">
          <span></span>
          <p>众筹</p>
        </div>
        <div :class="userActive" @click="examineUser">
          <span></span>
          <p>我的</p>
        </div>
     </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            chipsActive: 'chips-active',
            userActive: 'user'
        }
    },
    mounted(){
       if(this.$route.path == '/home/user_message'){
            this.examineUser()
       }else{
           this.examineChips()
       }
    },
    methods: {
        examineChips() {
            this.chipsActive = 'chips-active'
            this.userActive = 'user'
            this.$router.push({path:'/home/chips_list'})
        },
        examineUser() {
            this.chipsActive = 'chips'
            this.userActive = 'user-active'
            this.$router.push({path:'/home/user_message'})
        }
    },
}
</script>

<style lang="less">
@mainColor: #00d8c9;
.home {
    height: 100%;
    background-color: rgb(242, 242, 242);
    .bottom-bar {
        border-top: 1px solid #eee;
        background-color: #fff;
        height: 1rem;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 0.06rem;
        > div {
            width: 50%;
            height: 100%;
            float: left;
            > p {
                font-size: 0.24rem;
                text-align: center;
                margin-top: 0.05rem;
            }
            > span {
                display: block;
                width: 0.48rem;
                height: 0.48rem;
                margin: 0 auto;
            }
        }
        .chips-active {
            > p {
                color: @mainColor;
            }
            > span {
                background: url('../assets/众筹（颜色）@3x.png') no-repeat
                    center/cover;
            }
        }
        .user-active {
            > p {
                color: @mainColor;
            }
            > span {
                background: url('../assets/我的（颜色）@3x.png') no-repeat
                    center/cover;
            }
        }
        .chips {
            > p {
                color: #666;
            }
            > span {
                background: url('../assets/众筹（灰色）@3x.png') no-repeat
                    center/cover;
            }
        }
        .user {
            > p {
                color: #666;
            }

            > span {
                background: url('../assets/我的（灰色）@3x.png') no-repeat
                    center/cover;
            }
        }
    }
}
</style>


